<template>
  <div class="cart-bottom-bar">
    <div class="select-all"  @click="allCheck">
      <check-button class="check-button" :checked="goodsIsAllChecked"/>
      <span>全选</span>
    </div>

    <div class="price">
      <span class="note">不含运费</span>
      <span>合计:</span>
      <span class="total">{{total | formatPrice}}</span>
      <span class="settle" @click="settlement">结算({{checkGoodsCount}})</span>
    </div>
  </div>
</template>

<script>
  import CheckButton from 'components/content/checkButtom/CheckButton'
  export default {
    name: "CartBottomBar",
    components: {
      CheckButton
    },
    props: {
      goodsIsAllChecked: {
        type: Boolean,
        default: true
      },
      total: {
        type: Number,
        default: 0.0
      },
      checkGoodsCount: {
        type: Number,
        default: 0
      }
    },
    methods: {
      allCheck() {
        this.$emit('allCheck')
      },
      settlement() {
        if (this.checkGoodsCount) {
          this.$total('你还选择商品暂时不支持购买')
        } else {
          this.$total('你还没选择商品嘿')
        }
      },
    }
  }
</script>

<style scoped>
  .cart-bottom-bar {
    border-top: 1px solid hsla(0,0%,39.2%,.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 49px;
  }

  .select-all {
    display: flex;
    margin-left: 10px;
    align-items: center;
  }


  .select-all span {
    margin-left: 5px;
  }

  .price {
    display: flex;
    line-height: 49px;
  }

  .note {
    color: #dadde0;
    font-size: 12px;
    margin-right: 5px;
  }

  .total {
    color: var(--color-high-text);
    margin-right: 10px;
  }

  .settle {
    background-color: var(--color-tint);
    padding: 0px 20px 0px 20px;
    color: white;
  }

</style>